<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>06.bootstrap的字体图标与下拉按钮</title>

        <!-- bootstrap的动态功能都是依靠jquery的， 所以要引入jquery，而且要在它的前面-->
        <!-- jquery库, bootstrap依赖于jquery -->
        <script src="static/js/jquery-3.4.1.js"></script>
        <!-- bootstrap的样式 -->
        <link rel="stylesheet" href="static/css/bootstrap.css">
        <!-- bootstrap的js -->
        <script src="static/js/bootstrap.js"></script>
    </head>
    <body>
        <!-- 容器 -->
        <div class="container">
            <!-- 副标题 -->
            <h2>Bootstrap的使用<small>副标题v1.1</small></h2>
            <p>
                <!-- 强调-->
                <span class="lead">秋思</span><br/>
                <span class="glyphicon glyphicon-user"></span> [唐] 李白 <br/>
                春阳如昨日，碧树鸣黄鹂。<br/>
                芜然蕙草暮，飒尔凉风吹。<br/>
                天秋木叶下，月冷莎鸡悲。<br/>
                坐愁群芳歇，白露凋华滋。<br/>
            </p>

            <blockquote>
                <!-- 这儿使用栅格系统稍微布局了一下 -->
                <div class="row">
                    <span class="lead" style="margin-left: 40px; ">行路难·有耳莫洗颍川水</span><br/>
                    <span
                            class="col-sm-2 col-lg-offset-2"><small><span class="glyphicon glyphicon-bitcoin"></span> [唐] 李白</small></span>
                </div>
                有耳莫洗颍川水，有口莫食首阳蕨。<br/>
                含光混世贵无名，何用孤高比云月？<br/>
                吾观自古贤达人，功成不退皆殒身。<br/>
                子胥既弃吴江上，屈原终投湘水滨。<br/>
                陆机雄才岂自保？李斯税驾苦不早。<br/>
                华亭鹤唳讵可闻？上蔡苍鹰何足道？<br/>
                君不见吴中张翰称达生，秋风忽忆江东行。<br/>
                且乐生前一杯酒，何须身后千载名？<br/>
            </blockquote>

            <hr/>
            <!-- 基本的下拉按钮 -->
            <div class="dropdown" style="margin-top: 30px;">
                <button class="btn btn-primary" data-toggle="dropdown">选择技术门类：<span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <!-- li之中加不加a标签都可以，加的话就是可以添加跳转的链接了 -->
                    <li><a href="">Spring MVC</a></li>
                    <li>Spring Boot</li>
                    <li>Spring Cloud</li>
                </ul>
            </div>

            <!-- 下拉按钮的分割线 -->
            <div class="dropdown" style="margin-top: 30px;">
                <button class="btn btn-warning" data-toggle="dropdown">选择技术门类：<span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <!-- li之中加不加a标签都可以，加的话就是可以添加跳转的链接了，也可以获取相关的请求 -->
                    <li><a href="">Spring MVC</a></li>
                    <!-- 分割线 -->
                    <li class="divider"></li>
                    <li><a href="">Spring Boot</a></li>
                    <li class="divider"></li>
                    <li><a href="">Spring Cloud</a></li>
                </ul>
            </div>

            <!-- 下拉按钮的标题和分割线, 禁止选择 -->
            <div class="dropdown" style="margin-top: 30px;">
                <button class="btn btn-success" data-toggle="dropdown">选择技术门类：<span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">Spring 技术栈</li>
                    <li><a href="">Spring MVC</a></li>
                    <li class="divider"></li>
                    <li><a href="">Spring Boot</a></li>
                    <li><a href="">Spring Cloud</a></li>
                    <li class="dropdown-header">NoSQL 技术栈</li>
                    <li><a href="">Redis</a></li>
                    <li><a href="">MongoDB</a></li>
                    <li class="disabled"><a href="">ElasticSearch</a></li>
                </ul>
            </div>

            <!-- 分列式下拉按钮， 弹出的反应设置在下标之中, dropdown btn-group都是这上吧，不然下标和文字有间隔 -->
            <div class="dropdown btn-group" style="margin-top: 30px;">
                <button class="btn btn-info">选择技术门类</button>
                <button class="btn btn-info" data-toggle="dropdown"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">Spring 技术栈</li>
                    <li><a href="">Spring MVC</a></li>
                    <li class="divider"></li>
                    <li><a href="">Spring Boot</a></li>
                    <li><a href="">Spring Cloud</a></li>
                    <li class="dropdown-header">NoSQL 技术栈</li>
                    <li><a href="">Redis</a></li>
                    <li><a href="">MongoDB</a></li>
                    <li class="disabled"><a href="">ElasticSearch</a></li>
                </ul>
            </div>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <!-- 上拉列表, 组大小设置-->
            <div class="dropup btn-group btn-group-lg" style="margin-top: 30px;">
                <!-- 都可以触发 -->
                <button class="btn btn-danger" data-toggle="dropdown">课程选择</button>
                <button class="btn btn-danger" data-toggle="dropdown"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">语言课</li>
                    <li><a href="">语言</a></li>
                    <li class="divider"></li>
                    <li><a href="">国语</a></li>
                    <li><a href="">日语</a></li>
                    <li class="dropdown-header">通识课</li>
                    <li><a href="">人文社会</a></li>
                    <li><a href="">经济常识</a></li>
                    <li class="disabled"><a href="">银行理财</a></li>
                </ul>
            </div>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>

    </body>
</html>

